<template>
  <div class="app-container home">
    <div class="welcome-container">
      <div class="welcome-content">
        <div class="system-logo">
          <el-icon size="80" color="#409EFF">
            <Van />
          </el-icon>
        </div>
        <h1 class="system-title">临港捷运停车充电管理系统</h1>
        <h2 class="welcome-subtitle">欢迎使用智能停车充电管理平台</h2>
        <div class="system-description">
          <p>集停车管理、充电服务、智能调度于一体的综合管理系统</p>
          <p>为您提供高效、便捷、智能的停车充电解决方案</p>
        </div>
        <div class="version-info">
          <el-tag type="primary" size="large">系统版本: v{{ version }}</el-tag>
        </div>
      </div>
    </div>

  </div>
</template>


<script setup name="Index">
import { ref } from 'vue'
import { Van } from '@element-plus/icons-vue'

const version = ref('1.0.0')
</script>

<style scoped lang="scss">
.home {
  min-height: calc(100vh - 50px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .welcome-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding: 40px 20px;
  }

  .welcome-content {
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    max-width: 800px;
    width: 100%;
  }

  .system-logo {
    margin-bottom: 30px;

    .el-icon {
      animation: float 3s ease-in-out infinite;
    }
  }

  .system-title {
    font-size: 42px;
    font-weight: 700;
    color: #2c3e50;
    margin: 20px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    line-height: 1.2;
  }

  .welcome-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: #34495e;
    margin: 20px 0 30px 0;
    opacity: 0.9;
  }

  .system-description {
    margin: 30px 0;

    p {
      font-size: 18px;
      color: #5a6c7d;
      margin: 15px 0;
      line-height: 1.6;
    }
  }

  .version-info {
    margin-top: 40px;

    .el-tag {
      font-size: 16px;
      padding: 12px 24px;
      border-radius: 25px;
      font-weight: 600;
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .welcome-content {
      padding: 40px 20px;
      margin: 20px;
    }

    .system-title {
      font-size: 28px;
    }

    .welcome-subtitle {
      font-size: 18px;
    }

    .system-description p {
      font-size: 16px;
    }
  }
}
</style>